<template>
  <view>
	  
	  <!--轮播-->
	  <swiper class="card-swiper square-dot" 
		:indicator-dots="true" 
		:circular="true"
		:autoplay="true" 
		interval="5000" 
		duration="500" 
		@change="cardSwiper" 
		indicator-color="#8799a3"
		indicator-active-color="#feb2b2">
	  	<swiper-item @click="goDetailPage(item.id)" v-for="(item,index) in info" :key="index" v-if="index<3" :class="cardCur==index?'cur':''">
			<view class="swiper-item">
				<image :src="item.imgUrl" mode="aspectFill"></image>
			</view>
	  	</swiper-item>
	  </swiper>
	  <!--轮播-->
	  
	  
	<!--热卖商品-->
	<view class="activate bg-white solid-bottom margin-top">
		<view class="action">
			<text class="cuIcon-title" style="color: #feb2b2;"></text>
					 <text style="font-weight:bold;font-size: 120%;">活动列表</text>
		</view>
	</view>
	<!--热卖商品-->
	<!--活动-->
	<view class=" cu-card case">
		<view class="cu-item shadow" v-for="(item,index) in info" :key="index" >
			<!--活动图片-->
			<view class="image" @click="goDetailPage(item.id)">
				<image mode="aspectFit" :src="item.imgUrl"></image>
				<view class="cu-tag bg-gradual-red" style="margin-top: 5upx;margin-right: 5upx;" v-if="index<3">火热</view>
				<view class="cu-bar bg-shadeBottom"> 
					<text class="text-cut">
						{{item.title}}
					</text>
				</view>
			</view>
			<!--活动图片-->
			
			<!--观看,点赞,分析-->
			<view>
				
				<view class="text-gray text-sm text-right padding align-center">
					<!--观看-->
					<!-- <button class="cu-btn cuIcon" :class="item.isvote===false?'':'bg-gradual-red'" >
						<text :class="item.isvote===false?'cuIcon-attentionfill ':'cuIcon-attention'"
						class=" margin-lr-xs" style="font-size: 30upx;" ></text>
					</button> -->
					<!-- <text style="margin-left: 10upx;margin-right: 10upx;"></text> -->
					
					<!--点赞-->
					<!-- <button class="cu-btn cuIcon" :class="item.islike===false?'':'bg-blue'" @tap="clickAppreciate(index)" >
						<text :class="item.islike===false?'cuIcon-appreciatefill ':'cuIcon-appreciate'"
						class=" margin-lr-xs" style="font-size: 30upx;" ></text>
					</button>
					<text style="margin-left: 10upx;margin-right: 10upx;">{{item.like}}</text>
					 -->
					<!-- 评论 -->
					<!-- <button class="cu-btn cuIcon"  @tap="clickComment" >
						<text class="cuIcon-commentfill margin-lr-xs" style="font-size: 30upx;" ></text>
					</button>  -->
				
				</view>
			</view>
			<!--观看,点赞,分析-->
		</view>
	</view>
	<!--活动-->
  </view>
 
</template>

<script>
export default {
	data(){
		return{
			index:0,
			cardCur: 0,
			//轮播内容
			//content：内容描述
			//img：图片地址
			//attention:观看数
			//appreciate:点赞数
			//like:点赞标记
			//glance:观看标记
			//share:分享标记
			//url:活动详情页面链接
			//hot:热门标签
			info: [
			  {
				hot:0,
			    content: "限时免费体验课",
				type: 'image',
			    img: "http://39.106.100.179:9999/group1/M00/00/00/J2pks17AEOKAYqyeAAC1iBK7Cvg747.jpg",
				attention:12,
				appreciacte:14,
				like:0,
				glance:0,
				share:0,
				url:"/pagesB/activitiesDetail/index",
			  },
			  {
				hot:0,
			    content: "课程打折拉!!!",
				type: 'image',
			    img: "http://39.106.100.179:9999/group1/M00/00/00/J2pks17AENiAVXQKAAB0RlzUD-M097.jpg",
				attention:134,
				appreciacte:1132,
				like:0,
				glance:0,
				share:0,
				url:"/pagesB/activitiesDetail/index",
			  },
			  {
				hot:1,
			    content: "鸽子哥哥带你学嘤语",
				type: 'image',
			    img: "http://39.106.100.179:9999/group1/M00/00/00/J2pks17AEPmACJSxAAFPBRQXiLc408.jpg",
				attention:14,
				appreciacte:14,
				like:0,
				glance:0,
				share:0,
				url:"/pagesB/activitiesDetail/index",
			  }
			],
			
		}
	},
	mounted(){
		this.getAct();
	},
	onLoad(){
		//console.log("user");
		this.getAct();
	},
	methods: {
		//轮播图图片样式切换
		cardSwiper(e) {
			this.cardCur = e.detail.current
		},
		getAct(){
			//console.log("user");
			this.request({
				url:this.apiServer +
				"/activities/findAllActivities?skip=0&limit=20"
			}).then(res=>{
				//console.log(res.data.length);
				this.info = res.data;
			})
		},
		//页面跳转
		goDetailPage(id){
			console.log(id);
			// if(this.info[index].isvote == false){
			// 	this.info[index].isvote=true;
			// }
			uni.navigateTo({
				url:"/pagesB/activitiesDetail/index?id="+id
			});
		},
		clickComment(){
			uni.navigateTo({
				url:"/pagesB/activitiesDetail/activities-comments/index",
			});
		},
		//点赞事件监听
		clickAppreciate(index){
			if (this.info[index].islike == false) 
			{
				this.info[index].islike = true;
				this.info[index].like+=1;
						
			} else {
				this.info[index].islike = false;
			    this.info[index].like-=1;
			}
		},
		//分享事件监听
		clickShare(e){
			var index = e;
			this.info[index].share = 1;
		}
	}

}
</script>

<style>
	.activate{
		display: flex;
		justify-content: space-between;
		height: 90upx;
		align-items: center;
		padding-left: 20upx;
		padding-right: 20upx;
	}
</style>